<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
<script>
		function init() {
			var main_menu = SlidingDrawer({"id":"top", "open":true});
			
			Collapsible({"id":"structure"});
			Collapsible({"id":"behaviour"});
			Collapsible({"id":"style"});
			Collapsible({"id":"life"});
		}
		addEvent(window, "load",init);
	</script>
</head>
<body><header id="top" class="sliding-drawer">
		<img name="component" src="resources/images/component.png" alt="component">
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	<header>
		<h2>Overview</h2>
		<p>What are they, and why do they matter?</p>
	</header>
	<figure>
  		<img src="resources/images/headers/flickr-ollesvensson-3508792370.jpg" />
		<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/ollesvensson/3508792370" title="Lego">ollesvensson</a>.</figcaption>
	</figure>
	<h3>Introduction</h3>
	<p>Components are popular in web design as they provide a way to encapsulate frequently used functionality into pre-built structures and behaviours. These structures can then be easily customised using supplied options, or by directly editing the component itself. Web components are built using the basic building blocks of the web; HTML for structured data, CSS for visual rendering, and JavaScript for behaviour.</p>
	<blockquote cite="http://www.merriam-webster.com/dictionary/component">
		<h4>component <em> \kəm-'pō-nənt, 'käm-., käm-'\</em></h4>
			<dl>
				<dd><strong>component:</strong> <em>-n</em></dd>
				<dd>a constituent part; element; ingredient.</dd>
				<dt><strong>component:</strong> <em>-adj</em></dt>
				<dd>forming or functioning as a part or aspect;</dd>
			</dl>
			<cite>via <a href="http://www.merriam-webster.com/dictionary/component" title="Component - Definition from Merriam Webster">Merriam Webster</a>
			</cite>
	</blockquote>
	<p>Some UI components are built on top of frameworks such as <a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a> or <a href="http://www.sencha.com/products/touch/" title="Sencha Touch">Sencha Touch</a>. Using frameworks can improve productivity but may also introduce additional costs. For users, there may be the added cost (in time or data fees) of downloading the framework, while developers may require additional time and investment to gain competency in any framework API.</p>
	<p>To keep these components accessible to everyone, we have built them using only basic HTML, JavaScript and CSS. The components have no additional framework dependencies. They can however easily be extended, and even wrapped into other UI frameworks such as jQuery mobile.</p>
	<p><strong>Note:</strong> These components specifically demonstrate many of the new CSS3 capabilities found in Nokia Browser 7.3 for Symbian. The components will also work on the Nokia MeeGo browser and other WebKit based mobile browsers such as iOS and Android.</p>
	<p>While many of these components are flexible, they have not been optimised to work on large screens such as PCs and tablets. The components currently work best on 320 to 640 pixel wide displays but can easily be adapted and further optimised for larger screens.</p>
	<dl id="structure" class="collapsible">
		<dt><h4>The component structure</h4></dt>
		<dd>
			<p>Within each component are a number of structural elements. Some of these elements may contain data, while others are simply building blocks that will be used to attach the component’s behaviours and events.</p>
			<p>To improve each component’s structure, we have also used many <a href="http://www.w3.org/TR/html5/" title="W3C - HTML5: A vocabulary and associated APIs for HTML and XHTML">HTML5</a> semantic elements (such as <code>&lt;header&gt;</code>, <code>&lt;article&gt;</code>, <code>&lt;section&gt;</code> and <code>&lt;nav&gt;</code> in place) of generic <code>&lt;div&gt;</code>s.  These new elements enable us to create semantically meaningful structures and reduce the need to assign additional classes to non-semantic elements such as <code>&lt;div&gt;</code>s.</p>
			<a href="http://www.w3.org/html/logo/">
			<img src="resources/images/html5.png"
				  alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics"
				  title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics" />
			</a>
			<p>Most components contain <strong>one id</strong> and <strong>one class</strong>. The id is simply used to identify the component within the DOM, while the class provides a means of styling the component.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML</h4>
<pre>
&lt;dl id=&quot;test&quot; class=&quot;collapsible&quot;&gt;
  &lt;dt class=&quot;title&quot;&gt;
    &lt;!-- title --&gt;
  &lt;/dt&gt;
  &lt;dd class=&quot;content&quot;&gt;
    &lt;!-- content --&gt;
  &lt;/dd&gt;
&lt;/dl&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
			<p>In the above code snippet we're defining the basic structure of a collapsible component using the elements of a definition list.</p>
			</dd>
		</dl>
		<dl id="behaviour" class="collapsible">
			<dt><h4>Creating the component behaviour</h4></dt>
			<dd>
				<p>Once the component’s structure is in place, we can then define its <strong>properties and behaviours</strong>. This is accomplished by returning an object with the required properties and functions when requested.</p>
				<p>The following example illustrates the basic structure of a component definition in JavaScript.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
function Component(options) {
  var component = document.getElementById(options.id);
  var self = {
    options: options,
    component: component,
    init: function() {
      // do initialisation stuff here
    },
    update: function() {
      // add required functions and properties
  };	
  self.init();
  return self;
}
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
					<p>In this example, it’s important to note that the options object, which is passed to the component function, will usually include an id property that matches the id specified in the corresponding HTML component structure. The init() function initializes the component just before the object itself is returned.</p>
				</dd>
		</dl>
		<dl id="style" class="collapsible">
			<dt><h4>Styling the components</h4></dt>
			<dd>
				<p>CSS is used to define the overall look and feel of each component and also style the look of component states. If supported, CSS3 transition properties are also used, providing a seamless and efficient transition between states.</p>
				<p><strong>Note:</strong> The style sheets have been created using <a href="http://sass-lang.com/" title="Sass - Syntactically Awesome Stylesheets">Sass</a>, a command line tool that provides developer workflow improvements such as nesting, variables and mixins. These features are used at design time, and then compiled into the final style sheet that is delivered to the browser.</p>
				<p>Using Sass is <strong>not required</strong>, but can facilitate the creation and management of stylesheets. For example, the Mobile Web Component source files include a series of Sass includes (_includes.scss) enabling you to quickly change all the components' colour schemes, fonts and CSS effects such as gradients. The style sheet also includes many Sass expressions, used to lighten and darken the base colour values.</p>
				<p>The nokia.mwc-1.0.scss file found in resources/styles/src is <strong>the source Sass file</strong>. The nokia.mwc-1.0.css file found in resources/styles/ is the <strong>final compiled version</strong> that should be used online.</p>
				
			</dd>
		</dl>
		<dl id="life" class="collapsible">
			<dt><h4>Bringing components to life</h4></dt>
			<dd>
				<p>Once the HTML, JavaScript and CSS are in place, we wire it all up with just a line or two of JavaScript. First we define our options object, and any parameters required by the component (such as the component’s id in the DOM).</p>
				<p>Finally, we create a new component passing the options object in the process.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
var options = {
  "id":"test",
  "open":"true"
};
var test = new Component(options);

// the following syntax does the exact same thing
var test = new Component({"id":"test","open":"true"});
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
				<p><strong>Note:</strong> It's entirely possible to create the options object within the function call, all in one line of code (as shown in the example below), but for the sake of clarity it is often simpler to break it into two lines.</p>
			</dd>
		</dl>
		<h3 id="next">Next steps</h3>
		<p>Be sure to explore the HTML, CSS and JavaScript within these docs as they provide lots of little bits and pieces that can easily be reused, modified, or built upon to suit your needs. This includes boilerplate HTML, layout and typography styles in addition to the components themselves.</p>
		<p>Documentation and a live demo are included for each component. To download the source code please visit the <a href="https://projects.developer.nokia.com/mobile_web_components">Mobile web components repository</a> on Nokia Projects.</p>	
	<nav><a href="#top" class="top">back to top</a></nav>
	<footer>
		<nav>
			<ul>
				<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
				<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
			</ul>
		</nav>
		<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
	</footer>
</body>
</html>